<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <select name="" id="province">
                <option value="mr">请选择省份</option>
                <!-- <option value="">湖北</option>
                <option value="">河南</option>
                <option value="">湖南</option> -->
            </select>
            <select name="" id="city">
                <option value="">请选择城市</option>
                <!-- <option value="">武汉</option>
                <option value="">襄阳</option>
                <option value="">鄂州</option> -->
            </select>
            <select name="" id="area">
                    <option value="">请选择城市</option>
                    <!-- <option value="">武汉</option>
                    <option value="">襄阳</option>
                    <option value="">鄂州</option> -->
            </select>
</body>
    <script>
        var province=document.getElementsByClassName("province")[0]
        var city=document.getElementsByClassName("city")[0]
        var area=document.getElementsByClassName("area")[0]
        var xhr=new XMLHttpRequest()
        xhr.open("get","http://api.yytianqi.com/citylist/id/2")
        xhr.send()
        xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            var arr=JSON.parse(xhr.responseText)//整个数组
            console.log(arr)
            var html1=`<option value="">请选择省份</option>`
            arr.list.forEach(item => {
                html1+=`<option>${item.name}</option>`
            });
            province.innerHTML=html1
        }
        province.onchange=function(){
            var html2=`<option value="">请选择城市</option>`
            var html3=`<option value="">请选择地区</option>`
            console.log(this.value)
            if(this.value){
                 var arrcity=(arr.list.filter(item=>this.value==item.name)[0].list)
                //  console.log(arrcity)
                 arrcity.forEach(item => {
                     html2+=`<option value="${item.city_id}">${item.name}</option>`
                 });
            }
            else{
                html2=`<option value="">请选择城市</option>` 
                html3=`<option value="">请选择地区</option>`
            }
            city.innerHTML=html2
            area.innerHTML=html3
        }
        city.onchange=function(){
        //    绑定id
        // if(this.value){
        //     var arrcity=(arr.list.filter(item=>province.value==item.name)[0].list)
        //     arrcity.filter((item)=>{this.value=item.city_id})[0].list
        // } 

        // 不绑定id
        // console.log(this.value,province.value)
        html3=`<option value="">请选择地区</option>`       
            if(this.value){
                var arrcity=(arr.list.filter(item=>province.value==item.name)[0].list)
                console.log(arrcity)
                var arrarea=(arrcity.filter(item=>this.value==item.city_id)[0].list)
                // console.log(arrarea)
                if(arrarea){
                arrarea.forEach(item => {
                    html3+=`<option value="">${item.name}</option>`
                });
                }
                else{
                    html3=`<option value="">请选择地区</option>` 
                }
            }
            else{
                html3=`<option value="">请选择地区</option>`
            }
        area.innerHTML=html3
        }
        }
    </script>
</html>